<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式</title>
    <script>
        //此处直接编写js代码，则表示页面加载前既执行该代码
        //alert("Hello World");

        //如果希望出发后执行（也就是点击后执行）可以定义js函数，相当于Java中的方法
        //语法:function 函数名(参数列表){函数体}
        function sayHello() {
            alert(("Hello World"))
        }
    </script>
<!--  外部引入-->

    <script  type="text/javascript" src="test.js"></script>
    <!-- 错误示例一:对于script标签,不能省略结束标签,使用自结束 -->
    <!--    <script type="text/javascript" src="test.js"/>-->
    <!-- 错误示例二:在引入外部js文件的script标签体中,不允许编写js代码 -->
    <!--    <script type="text/javascript" src="test.js">-->
    <!--        function f1(){-->
    <!--            alert("Hello World");-->
    <!--        }-->
    <!--    </script>-->
</head>
<body>
<!--
引入方式一:简短缩写方式
在每一个HTML元素中都有很多时间句柄的属性
每一个事件句柄都对应一个元素的属性
此处以单击按钮事件为例，其属性为onclick（事件句柄）
语法:事件句柄="Javascript:xxxx;"
其中JavaScript:可以省略
-->
<button onclick="javascipt:alert('这是一个简短缩写方式')">简短缩写方式</button>
<br>

<!--
方式二:内联方式
在当前文档的任意位置（一般在head子标签中）定义一个script标签
在script标签中编写js函数
在事件句柄的属性值函数中可以调用对应的js函数
-->
<button onclick="sayHello()">内联方式</button><br>
<!--
   方式三:外部引入
    在外部定义一个*.js的文件,在*.js文件中编写js代码
    在当前页面中通过script标签的src属性引入进来
-->
<button onclick="fn()">外部引入方式</button><br>
<!--控制台报错f1未定义-->
<button onclick="f1()">测试</button>
</body>
</html>